<template>
<div class="login-wrap">
    <div class="rs-login">
        <div class="title">登&emsp;录</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="username">
                <i class="head rs-icon-user"></i>
                <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <i class="head rs-icon-password"></i>
                <el-input v-model="ruleForm.password" placeholder="密码" :type="passwordType" ref="password"></el-input>
                <i class="tail" :class="passwordType==='password'?'rs-icon-eye':'rs-icon-eyeopen'" @click="showPwd"></i>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="disabledLogin" :loading="loading" type="primary" @click="submitForm('ruleForm')" style="width:100%;">登&emsp;录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>
<script>
import authUtils from '@/utils/authUtils.js'
export default {
    name:'LoginPage',
    data(){
        return{
            disabledLogin:true,
            key:"",
            passwordType:"password",
            loading:false,
            ruleForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    // { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        if( window.debug === true ){
            this.ruleForm.username = 'sysadmin';
            this.ruleForm.password = '123456';
        }
        this.$req({
            url: "/key",
            method: 'get'
        }).then(response => {
            const { data } = response;
            if( data.error_code == 0 ){
                this.key = data.key;
                this.disabledLogin = false;
            }else{
                this.showError('获取KEY失败！');
            }
        }).catch(error => {
            this.showError('网络错误！');
        });
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //alert('submit!');
                    this.login(this.ruleForm.username,this.ruleForm.password);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        login(username,password){

            var jse = new JSEncrypt();
            jse.setPublicKey(this.key);
            const userInfo = {
                username:username,
                password:jse.encrypt(password)
            }
            this.loading = true;
            this.$req({
                url: "/auth/login",
                method: 'post',
                data:userInfo
            }).then(response => {
                this.loading = false;
                const { data } = response;
                //console.log(data)
                if( data.error_code == 0 ){
                    this.$store.commit('app/setAuthInfo',data);
                    authUtils.loginOk(username);
                    this.$router.push({ path: '/home' })
                }else{
                    if( data.error_code == 20101 || data.error_code == 20102)
                        this.showError('登录失败，用户名或密码错误！');
                    else{
                        this.showError(data.error_desc);
                    }
                }
            }).catch(error => {
                this.loading = false;
                this.showError('网络错误！');
            });
        },
        resetForm(formName) {
           
        },
        showPwd(){
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        showError( text ){
            this.$message({
                showClose: false,
                message: text,
                type: 'error',
                customClass:'login-tips',
                duration:2000
            });
        }
    }
}
</script>